<template>
  <MainHeader
    title="相册"
    bgUrl="https://jiangeges.oss-cn-heyuan.aliyuncs.com/front-end/science.png"
  >
  </MainHeader>
  <div class="list-image__lazy">
    <el-image
      v-for="(photo, index) in photos"
      :key="photo"
      :src="photo.url"
      lazy
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="previewList"
      :initial-index="index"
      fit="fill"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import MainHeader from "@/components/MainHeader/index.vue";
import { getPhotoList } from "@/api/photo";
import { useRoute } from "vue-router";
interface Photo {
  id: number;
  url: string;
}
const route = useRoute();
const photos = ref<Photo[]>([]);
const previewList = ref<string[]>([]);
const type = ref<number>();

const getPhotos = async () => {
  try {
    const res = await getPhotoList({
      pageNo: 1,
      pageSize: 1000,
      type: type.value,
    });
    if (res.status == 200) {
      photos.value = res?.data?.list || [];
      previewList.value =
        res?.data?.list?.map((pic: { id: number; url: string }) => pic.url) ||
        [];
    }
  } catch (error) {
    console.log(error);
  }
};
watch(
  () => route,
  (newValue: any) => {
    if (newValue.path == "/photos" && newValue.query.type) {
      type.value = newValue.query.type;
      getPhotos();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.list-image__lazy {
  margin: 0 auto;
  overflow-y: auto;
  display: grid;
  border-radius: 10px;
}
@media screen and (min-width: 768px) {
  .list-image__lazy {
    max-width: 70%;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 16px;
    column-gap: 24px;
    padding: 20px;
    .el-image {
      height: 15rem;
    }
  }
}
@media screen and (max-width: 768px) {
  .list-image__lazy {
    padding: 10px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    .el-image {
      height: 10rem;
    }
  }
}
</style>
